<template>
  <div class="customer-detail-box">
    <el-button
      class="cus-reset-btn"
      type="success"
      @click="$router.go(-1)"
    >返回</el-button>
    <el-row class="cus-row-box">
      <el-col :span="16">
        <div class="l-box">
          <div class="l-top-box pt20 pt21">
            <div class="title-box">
              <span class="label">线索ID：</span>
              <span class="title-label">{{ userData.id }}</span>
            </div>
            <div class="con-box">
              <div class="info-box">
                <div class="info-list mt0">
                  <span class="label">创建时间：{{ userData.createTime }}</span>
                </div>
                <div class="info-list mt0">
                  <span class="label">归属时间：{{ userData.createTime }}</span>
                </div>
                <div class="info-list mt0">
                  <span class="label">手机号：{{ userData.phone }}</span>
                </div>
                <div class="info-list">
                  <span class="label">渠道来源：{{ userData.channel==='1'? '线上活动' : '推广介绍' }}</span>
                </div>
                <div class="info-list">
                  <span class="label">线索分配：{{ userData.createBy }}</span>
                </div>
                <div class="info-list">
                  <span class="label">线索归属：{{ userData.assignName }}</span>
                </div>
                <div class="info-list">
                  <span class="label">详&nbsp;&nbsp;细：{{ userData.details }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="l-top-box">
            <div class="title-box">
              <span class="title-label">添加跟进</span>
              <div class="btn-box">
                <el-button
                  v-show="key==='look'? false : true"
                  class="primary-btn"
                  type="primary"
                  @click="lostClue"
                >伪线索</el-button>
                <el-button
                  v-show="key==='look'? false : true"
                  class="default-btn"
                  type="primary"
                  @click="goCommerce"
                >转商机</el-button>
              </div>
            </div>
            <div class="con-box">
              <el-form
                ref="form"
                class="cus-search-box cus-form-box"
                :model="form"
                :rules="rules"
                label-width="125px"
              >
                <el-form-item label="客户姓名：" prop="Name">
                  <el-input
                    v-model="form.Name"
                    disabled
                    placeholder="请输入客户姓名"
                  />
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                  <el-radio-group v-model="form.sex" :disabled="key==='look'? true : false ">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item />
                <el-form-item label="年龄：" prop="age">
                  <el-input-number
                    v-model="form.age"
                    :disabled="key==='look'? true : false "
                    :precision="0"
                    :min="1"
                    :max="99"
                    placeholder="请输入年龄"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="微信号：" prop="weixin">
                  <el-input
                    v-model="form.weixin"
                    :disabled="key==='look'? true : false "
                    placeholder="请输入微信号"
                    maxlength="20"
                  />
                </el-form-item>
                <el-form-item label="QQ：" prop="qq">
                  <el-input
                    v-model="form.qq"
                    :disabled="key==='look'? true : false "
                    placeholder="请输入qq"
                    maxlength="20"
                  />
                </el-form-item>
                <el-form-item class="wp-100" label="意向等级：" prop="level">
                  <el-radio-group v-model="form.level" :disabled="key==='look'? true : false ">
                    <el-radio label="0">A 近期学习</el-radio>
                    <el-radio label="1">B 打算学习，考虑中</el-radio>
                    <el-radio label="2">C 进行了解</el-radio>
                    <el-radio label="3">D 唱跳</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item class="wp-100" label="意向学科：" prop="subject">
                  <el-select
                    v-model="form.subject"
                    :disabled="key==='look'? true : false "
                    placeholder="请选择意向学科"
                    clearable
                  >
                    <el-option
                      v-for="e in subjectList"
                      :key="e.id"
                      :label="e.name"
                      :value="e.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item class="wp-100" label="跟进记录：" prop="followuprecords">
                  <el-input
                    v-model="form.followuprecords"
                    :disabled="key==='look'? true : false "
                    type="textarea"
                    :rows="4"
                    show-word-limit
                    placeholder="请输入跟进记录"
                    maxlength="255"
                  />
                </el-form-item>
                <el-form-item
                  class="wp-100"
                  label="下次跟进时间："
                  prop="nextTime"
                >
                  <el-date-picker
                    v-model="form.nextTime"
                    :disabled="key==='look'? true : false "
                    clearable
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm"
                    format="yyyy-MM-dd HH:mm"
                    placeholder="请选择下次跟进时间"
                    default-time="12:00:00"
                  />
                </el-form-item>
                <el-form-item class="search-btn wp-100">
                  <el-button
                    v-show="key==='look'? false : true"
                    class="cus-search-btn"
                    type="primary"
                    @click="addOption"
                  >确认</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="r-box pt20">
          <div class="title-box">
            <span class="title-label">操作记录</span>
          </div>
          <div class="con-box">
            <div class="record-list">
              <div
                v-for="item in dataList"
                :key="item.id"
                class="item-box"
              >
                <div
                  class="con-box"
                >
                  <span class="label">意向等级：{{ resetLev(item.level) }}</span>
                </div>
                <div
                  class="con-box"
                >
                  <span class="label">意向学科：{{ resetSub(item.subject ) }}</span>
                </div>
                <div class="con-box">
                  <span class="label">下次跟进时间：{{ item.nextTime }}</span>
                </div>
                <div class="con-box">
                  <span class="label">跟进记录：{{ item.followuprecords }}</span>
                </div>
                <div class="operation-box">
                  <div class="label">操作人：{{ userData.createBy }}</div>
                  <div class="label">{{ item.nextTime }}</div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 伪线索上报 -->
    <el-dialog title="伪线索上报" :visible="visible" width="618px" append-to-body :close-on-click-modal="false" @close="closeDailog">
      <el-form ref="form2" class="form" label-width="110px" :model="form" :rules="rules2">
        <el-form-item label="原因：" prop="reason">
          <el-select v-model="form2.reason" filterable placeholder="请选择原因">
            <el-option
              v-for="e in rosList"
              :key="e.dictValue"
              :label="e.dictLabel"
              :value="e.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            v-model="form2.remark"
            type="textarea"
            placeholder="请输入备注"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cus-reset-btn" @click="closeDailog">取 消</el-button>
        <el-button class="cus-search-btn" type="primary" @click="goWeiClue">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getClueDataApi, getRosListApi, goWeiClueApi, addOptionListApi, getComListApi } from '@/api/clue'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      id: this.$route.query.id,
      key: this.$route.query.key,
      // 伪线索上报
      visible: false,
      // 渲染数据头部
      userData: {},
      form: {
        id: '',
        Name: '', // 名字
        weixin: '', //
        subject: '', // 学科
        qq: '', // qq
        followuprecords: '', // 跟进记录
        age: undefined, // 年龄
        sex: null, // 性别
        level: '', // 意向等级
        nextTime: '' // 日期
      },
      rules: {
        Name: [{ required: true, message: '请输入客户姓名！', trigger: 'blur' }],
        subject: [{ required: true, message: '请选择学科！', trigger: 'blur' }],
        level: [{ required: true, message: '请输入客户姓名！', trigger: 'blur' }],
        followuprecords: [{ required: true, message: '请输入跟进记录！', trigger: 'blur' }],
        nextTime: [{ required: true, message: '请输入下册跟进事件！', trigger: 'blur' }]
      },
      form2: {
        reason: '',
        remark: ''
      },
      rules2: {
        reason: [{ required: true, message: '请选择原因', trigger: 'blur' }]
      },
      // 操作记录循环遍历数组
      dataList: [],
      // 学科数组
      subjectList: [{ id: '0', name: 'Java' }, { id: '1', name: '前段' }, { id: '2', name: '人工智能' }, { id: '3', name: '大数据' }, { id: '4', name: 'Python' }, { id: '6', name: '测试' }, { id: '7', name: '新媒体' }, { id: '8', name: '产品经理' }, { id: '9', name: 'UI设计' }],
      // 原因列表
      rosList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /**
     * 处理学科回显
     */
    resetSub(val) {
      const res = this.subjectList.find(e => e.id === val)
      return res.name
    },
    /**
     * 处理学科回显
     */
    resetLev(val) {
      const res = [{ id: '0', value: 'A 近期学习' }, { id: '1', value: 'B 打算学习，考虑中' }, { id: '2', value: 'C 进行了解' }, { id: '3', value: 'D 唱跳' }].find(e => e.id === val)
      return res.value
    },
    /**
     * 跟进记录
     */
    addOption() {
      this.$refs.form.validate(async key => {
        if (!key) return
        this.form.id = this.id
        const res = await addOptionListApi(this.form)
        if (res.code === 500) {
          Message.error('添加跟进记录失败！')
          return
        }
        Message.success('添加跟进记录成功！')
        this.getData()
      })
      this.form = {
        id: '',
        Name: '', // 名字
        weixin: '', //
        subject: '', // 学科
        qq: '', // qq
        followuprecords: '', // 跟进记录
        age: undefined, // 年龄
        sex: null, // 性别
        level: '', // 意向等级
        nextTime: '' // 日期
      }
    },
    /**
     * 转伪线索
     */
    async  goWeiClue() {
      // this.$refs.form2.validate(async key => {
      // if (!key) return
      const res = await goWeiClueApi(this.id, this.form2)
      if (res.code === 500) {
        Message.error('转伪线索失败！')
        return
      }
      Message.success('转伪线索成功！')
      this.closeDailog()
      // })
    },
    /**
     * 是否转为商机
     */
    goCommerce() {
      this.$confirm('是否转为客户？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await getComListApi(this.id)
        if (res.code === 500) {
          Message.error('转商机失败！')
          return
        }
        Message.success('转商机成功！')
      }).catch(() => {
      })
    },
    /**
     * 获取学科列表
     */
    async getRosList() {
      const res = await getRosListApi()
      if (res.code === 500) {
        Message.error('获取学科列表失败！')
        return
      }
      this.rosList = res.data
    },
    /**
     * 开启弹窗
     */
    lostClue() {
      this.getRosList()
      this.visible = true
    },
    /**
     * 关闭弹窗
     */
    closeDailog() {
      this.visible = false
      this.$refs.form.resetFields()
    },
    /**
     * 获取回显数据
     */
    async getData() {
      const res = await getClueDataApi(this.id)
      if (res.code === 500) {
        Message.error('获取回显数据失败！')
        return
      }
      const { weixin, subject, followuprecords, sex, level } = res.data
      this.form = { weixin, subject, followuprecords, sex, level }
      this.form.Name = res.data.name
      this.userData = res.data
      this.dataList = res.data.clueOperations
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-detail-box{
  .cus-row-box{
    display: flex;
  }
  .l-box{
    box-shadow: 0px 5px 5px 5px rgba(99, 97, 96, 0.1);
    height: 100%;
    .l-top-box{
      padding: 0 30px 0 20px;
      box-sizing: border-box;
      .title-box{
        width: 100%;
        height: 57px;
        line-height: 57px;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: #332929;
        display: flex;
        .btn-box{
          flex: 1;
          text-align: right;
        }
      }
      .con-box{
        padding: 30px 25px;
        box-sizing: border-box;
        .info-box{
          display: flex;
          flex-wrap: wrap;
          .info-list{
            width: calc(100% / 3);
            display: flex;
            flex-flow: column;
            margin-top: 26px;
            .label{
              height: 18px;
              font-size: 13px;
              font-weight: 500;
              text-align: left;
              color: #333;
              line-height: 18px;
            }
          }
        }
      }
    }
  }
  .r-box{
    padding: 0 10px;
    box-sizing: border-box;
    .title-box{
      width: 100%;
      height: 57px;
      line-height: 57px;
      border-bottom: 2px solid #333;
      font-size: 16px;
      font-weight: 500;
      text-align: left;
      color: #332929;
      display: flex;
      .title-label{
        padding-left: 8px;
      }
    }
    .con-box{
      .record-list{
        .item-box{
          min-height: 99px;
          background: #f9f9f9;
          border-radius: 4px;
          margin-top: 12px;
          padding: 12px;
          box-sizing: border-box;
          .con-box{
            min-height: 20px;
            line-height: 20px;
            margin-bottom: 10px;
            font-size: 13px;
            font-weight: 400;
            display: flex;
            &:nth-last-child(-n+2){
              margin-bottom: 16px;
            }
            .label{
              color: #333;
            }
          }
          .con-column{
            flex-flow: column;
            .des{
              text-align: left;
            }
          }
          .operation-box{
            min-height: 34px;
            line-height: 17px;
            font-size: 12px;
            font-weight: 400;
            color: #666666;
            padding-top: 12px;
            text-align: right;
            border-top: 1px solid #f5efee;
          }
        }
      }
    }
  }
  .mt0{
    margin-top: 0 !important;
  }
}
.pt20 {
  padding-top: 20px !important;
}
.pt21{
  margin-bottom: 5px;
  border-bottom: 2px solid #333;
}
::v-deep .pt21 .title-box{
  margin-left: 30px;
  font-size: 20px!important;
  color: #333!important;
  font-weight: 600!important;
}
.title-box {
  height: 50px !important;
  line-height: 50px !important;
}
.btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
::v-deep .cus-form-box .el-input__inner{
  width: 180px!important;
}
::v-deep .cus-form-box .el-textarea__inner{
  width: 300px!important;
}
::v-deep .cus-form-box .el-form-item__label{
  font-weight: 500;
  color: #333;
}
::v-deep .el-textarea {
  width: 500px;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left; //位置居左
}
::v-deep .el-textarea__inner{
  width: 300px !important;
  height: 120px;
}
::v-deep .form .el-input__inner{
  width: 300px;
}
::v-deep .el-input__count{
  width: 180px !important;
}
</style>
